<template>
	<view class="approve-record">
		<u-time-line>
			<u-time-line-item v-for="(item,index) in list" :key="index">
				<template v-if="item.afterStatus!=='0'&& item.afterStatus!=='3'" v-slot:node>
					<view class="node-box"
						:style="judgeStatus(item.afterStatus)?'background: #19be6b;':'background: #ff0000'">
						<u-icon :name="judgeStatus(item.afterStatus)?'checkmark':'close'" color="#fff"
							:size="16"></u-icon>
					</view>
				</template>
				<template v-slot:content>
					<view class="content-box">
						<view class="title">{{formatStatusText(item.afterStatus)}}</view>
						<view class="reson">
							{{item.reason}}
						</view>
						<view class="time">{{formatTimeText(item.createTime)}}</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParam: {
					itemId: undefined
				},
				list: [],
				statusOptions: []
			}
		},
		onLoad(options) {
			this.queryParam.itemId = options.id
			this.init()
		},
		methods: {
			formatTimeText(dateString) {
				return uni.$u.timeFormat(new Date(dateString), 'yyyy年mm月dd日')
			},
			formatStatusText(status) {
				return this.statusOptions.find(item => item.dictValue === status).dictLabel
			},
			judgeStatus(status) {
				let reslut = true
				if (status !== '1' && status !== '4') {
					reslut = false
				}
				return reslut
			},
			init() {
				this.getInitData()
				this.getApproveRecord()

			},
			getInitData() {
				this.$u.api.approveData.getInitData('approve_status').then(res => {
					this.statusOptions = res.data.approve_status
				})
			},
			getApproveRecord() {
				this.$u.api.approveData.approveRecord(this.queryParam).then(res => {
					this.list = res.data.rows
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.approve-record {

		padding: 20rpx 40rpx;

		.node-box {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}

		.content-box {
			.title {
				color: #333333;
				font-weight: bold;
				font-size: 14px
			}

			.reson {
				color: rgb(150, 150, 150);
				margin: 20rpx 0;
			}

			.time {
				color: rgb(200, 200, 200);
				font-size: 10px
			}
		}
	}
</style>